
<template>
  <div class="app-container">
    <search-header
      v-show="boo.showSearch"
      :select-prop="selectProp"
      @search-action="searchAction"
    ></search-header>

    <div class="app-permission-container flex-between mb8">
      <span class="page-list-title">人员列表</span>
      <div class="action-content">
        <el-button type="primary" v-hasPermi="['agent:acddRole:add']" size="mini" @click="showDialog('staff', 'add')"
        >新增</el-button>
      </div>
    </div>
    <div class="app-table-container">
      <el-table
        v-loading="boo.loading"
        :data="list" border header-row-class-name="app-table-list"
      >
        <el-table-column
          label="姓名"
          align="center"
          key="nickName"
          prop="nickName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="登录账号（手机号）"
          align="center"
          key="userName"
          prop="userName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="创建时间"
          align="center"
          key="createTime"
          prop="createTime"
          width="120"
        />
        <el-table-column
          label="状态"
          align="center"
          key="status"
          prop="status"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{row}">
            <el-tag :type="row.status == '1' ? 'danger' : 'success'">{{row.status | numToStr(selectProp.selectList, 'status')}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="240"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              size="mini"
              type="text" :loading="row.isEdit"
              icon="el-icon-edit" v-hasPermi="['agent:acddRole:edit']"
              @click="showDialog('staff', 'edit', row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text" :loading="row.isControl"
              icon="el-icon-delete" v-hasPermi="['agent:acddRole:editStatus']"
              @click="controlRow(row)"
              >{{row.status == '1' ? '启用' : '停用'}}</el-button
            >
            <el-button
              size="mini"
              type="text" v-hasPermi="['agent:acddRole:remove']"
              icon="el-icon-delete"
              @click="deleteRow(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="other.total > 0"
        :total="other.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 人员弹窗 -->
    <staff-dialog ref="staff-dialog" v-model="currentItem" @submit="submitDialog"/>
  </div>
</template>

<script>
import {
  getRoleList, delRole, contrlRole
} from "@/api/userManage/admin-staff.js";
export default {
  name: "List",
  components: {
    "search-header": () => import("@/rhComponents/searchHeader/index"),
    "staff-dialog": () => import("./temp/staff-dialog"),
  },
  filters: {
    numToStr(num, list, type){
      let index = list.findIndex(item => item.name == type)
      if(index == -1) return '未定义参数'
      let idx = list[index].child.findIndex(i => i.dictValue == num)
      if(idx == -1) return '---'
      return list[index].child[idx].dictLabel
    }
  },
  data() {
    return {
      selectProp: JSON.parse(JSON.stringify(this.$getSearchHeader(this))),
      boo: {
        loading: false, // 遮罩层
        multiple: true, // 非多个禁用
        showSearch: true, // 显示搜索条件
      },
      other: {
        total: 0, //总条数
      },
      dictsList: [], //字典列表
      // 地块列表
      list: [],
      currentItem: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  mounted(){
    let _self = this
    _self.initGetDicts().then(res => {
      _self.getList()
    })
  },
  methods: {
    // 搜索条件查询
    searchAction(prop) {
      this.queryParams = Object.assign(this.queryParams, prop["params"]);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询用户列表 */
    getList() {
      this.boo.loading = true;
      getRoleList(this.queryParams)
        .then((response) => {
          this.list = response.rows;
          this.other.total = response.total;
          this.boo.loading = false;
        })
        .catch(() => {});
    },
    async controlRow(row){
      let _self = this
      _self.$set(row, 'isControl', true)
      let params = {
        userId: row.userId,
        status: row.status == 1 ? '0' : '1'
      }
      await contrlRole(params).then(res => {
        _self.$message.success('操作成功')
      _self.$set(row, 'status', params.status)
      })
      _self.$set(row, 'isControl', false)
    },
    /** 删除按钮操作 */
    deleteRow(row) {
      this.$modal
        .confirm('是否确认删除？')
        .then(function () {
          return delRole(row.userId);
        })
        .then(() => {
          this.queryParams.pageNum = 1
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    showDialog(ref, type, row) {
      let _self = this, vm = this.$refs['staff-dialog'];
      _self.$nextTick(() => {
        vm.showDialog(ref, `${type}`, row)
      })
    },
    submitDialog(action) {
      let _self = this;
      if(action == 'add'){
        _self.queryParams.pageNum = 1
      }
      _self.getList()
    },
  }
};
</script>
<style scoped lang="scss">
</style>